<template>
  <div>
    <!-- 头部 -->
    <login-head @back='back'
    @home='home'>
    </login-head>
    <div class="wrap">
      <div class="title">
        <img src="https://upyun.dinghuale.com/uploads/images/logo.png" alt="">
      </div>
      <!-- 登录表单 -->
      <div class="formInfo">
        <input type="text"
        v-model="user.name"
        class="username"
        name="username"
        placeholder="请输入用户名">
        <input type="password"
        v-model="user.pwd"
        class="pwd"
        name="pwd"
        placeholder="请输入密码">
        <van-button type="default"
        @click="login"
        size="large"
        color="cadetblue">
        登录
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import LoginHead from './components/LoginHead'
  export default {
    data () {
      return {
        user: {
          name: '',
          pwd: ''
        }
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      home() {
        this.$router.push('./home')
      },
      //登录事件
      login() {
        //这里应该是处理和发送axios,暂且用延时器代替
        setTimeout(() => {
          //存储一个token,方便来判断是否已经登录，同时用户名和密码也要储存
          const token = 'flower' //相当于秘钥
          //存储后台的秘钥
          localStorage.setItem('access_token',
          token)
          //登录之后来判断有没有传递过来重定向之前的路由信息
          if(this.$route.params.from) {
            //做判断 如果有就去该页面，这里是前端用来进行编程式导航
            this.$router.push(this.$route.params.from)
            } else {
              this.$router.push('./home')
              }
          },1000)
        }
      },
    components: {
      LoginHead
    }
  }
</script>

<style lang="scss" scoped>
  .wrap{
    background: #fff;
    box-sizing: border-box;
    .formInfo{
      padding: 30px 30px 0px 30px;
      margin-top: 20px;
      height: 200px;
      box-sizing: border-box;
      input{
        border: none;
        border-bottom: 2px solid cadetblue;
        height: 40px;
        line-height: 40px;
        margin-bottom: 30px;
        width: 100%;
        &.pwd{
          margin-bottom: 50px;
        }
      }
    }
    .title{
      margin-top: 20px;
      align-items: center;
      justify-content: center;
      display: flex;
      height: 100px;
      box-shadow: 0px 2px 5px #f1f1f1;
      img{
        margin-bottom: 10px;
        width: 200px;
        height: 80px;
      }
    }
  }
</style>